<template>
  <!-- 添加课程-->
  <div class="app">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="box">
      <el-form-item label="课程名称" prop="courseName">
        <el-input v-model="ruleForm.courseName" class="input top" size="mini" clearable placeholder="请填入课程名"></el-input>
      </el-form-item>
      <el-form-item label="课程简称" prop="courseAbbreviation">
        <el-input v-model="ruleForm.courseAbbreviation" class="input top" size="mini" clearable placeholder="请填入课程名简称"></el-input>
      </el-form-item>
      <el-form-item label="课程封面" prop="coursePicture">
        <el-upload
        :data="goods"
        v-model="ruleForm.coursePicture"
          action="/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          class="img">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="核心培养目标" prop="courseTrainObjective">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入核心培养目标"
          v-model="ruleForm.courseTrainObjective"
          class="img">
        </el-input>
      </el-form-item>
      <el-form-item label="教学目标" prop="courseTeachGoal">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请填入教学目标"
          v-model="ruleForm.courseTeachGoal"
          class="img">
        </el-input>
      </el-form-item>
      <el-form-item label="教学方法" prop="courseTeachMethod">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请填入教学方法"
          v-model="ruleForm.courseTeachMethod"
          class="img">
        </el-input>
      </el-form-item>
          <el-form-item label="课程系列" prop="courseTypeName">
              <el-select v-model="ruleForm.courseTypeName" placeholder="请选择课程系列" size="mini" class="input top" clearable>
                <el-option label="Java课程系列" value="shanghai"></el-option>
                <el-option label="PHP课程系列" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="课程语言" prop="courseLanguageName">
                <el-select v-model="ruleForm.courseLanguageName" placeholder="请选择课程语言" size="mini" class="input top" clearable>
                  <el-option label="图形化编程" value="shanghai"></el-option>
                  <el-option label="Text" value="beijing"></el-option>
                  <el-option label="C" value="beijing"></el-option>
                  <el-option label="Java" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="前导课程" prop="beforeCourseName">
                  <el-select v-model="ruleForm.beforeCourseName" placeholder="请选择前导课程" size="mini" class="input top" clearable>
                    <el-option label="无敌培训" value="shanghai"></el-option>
                    <el-option label="Java基础测试课程" value="beijing"></el-option>
                    <el-option label="C语言" value="beijing"></el-option>
                    <el-option label="ass" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
            <el-form-item label="后续课程" prop="afterCourseName">
                <el-select v-model="ruleForm.afterCourseName" placeholder="请选择后续课程" size="mini" class="input top" clearable>
                  <el-option label="无敌培训" value="shanghai"></el-option>
                  <el-option label="Java基础测试课程" value="beijing"></el-option>
                  <el-option label="C语言" value="beijing"></el-option>
                  <el-option label="ass" value="beijing"></el-option>
                </el-select>
              </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')" class="btn top">保存</el-button>
              <el-button @click="resetForm('ruleForm')" class="btn top">取消</el-button>
            </el-form-item>
        </el-form>
      </div>
    </template>
    <script>
    export default{
      data () {
        return {
          ruleForm: {
            courseName: '',
            courseAbbreviation: '',
            courseTypeName: '',
            courseLanguageName: '',
            beforeCourseName: '',
            afterCourseName: '',
            coursePicture: '',
            courseTrainObjective: '',
            courseTeachGoal: '',
            courseTeachMethod: ''
          },
          rules: {
            courseName: [
              {required: true, message: '课程名不能为空', trigger: 'blur'}
            ],
            courseAbbreviation: [
              {required: true, message: '课程名简称不能为空', trigger: 'blur'}
            ],
            courseTypeName: [
              {required: true, message: '课次系列不能为空', trigger: 'blur'}
            ],
            courseLanguageName: [
              {required: true, message: '课程语言不能为空', trigger: 'blur'}
            ],
            beforeCourseName: [
              {required: true, message: '前导课程不能为空', trigger: 'blur'}
            ],
            afterCourseName :[
              {required: true, message: '后续课程不能为空', trigger: 'blur'}
            ],
            courseTrainObjective: [
              {required: true, message: '核心培养目标不能为空', trigger: 'blur'}
            ],
            courseTeachGoal: [
              {required: true, message: '教学目标不能为空', trigger: 'blur'}
            ],
            courseTeachMethod: [
              {required: true, message: '教学方法不能为空', trigger: 'blur'}
            ]
          }
        }
      },
  components: {

  },
 methods: {
   submitForm(formName) {
           this.$refs[formName].validate((valid) => {
             if (valid) {
               alert('submit!');
             } else {
               console.log('error submit!!');
               return false;
             }
           });
         },
         resetForm(formName) {
           this.$refs[formName].resetFields();
         }
 }
}
</script>

<style scoped="scoped" lang="scss">
  @import '../assets/style/common.scss';
  .app {
    width: 100%;
    height: 100%;
    .box {
      margin-top: 20px;
      width: 90%;
      height: 100%;
      .input {
        width: 90%;
        margin-left: 30px;
      }
      .radio {
       margin-left: 30px;
      }
      .btn {
        width: 55px;
        height: 30px;
      }
      .top {
        margin-top: 15px;
      }
      .img {
        margin-top: 15px;
        margin-left: 30px;
      }
      .avatar-uploader .el-upload {
          border: 1px solid #d9d9d9;
          width: 250px;
          height: 250px;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
          width: 250px;
          height: 250px;
          border-color: #409EFF;
        }
        .avatar-uploader-icon {
          border: 1px dashed #d9d9d9;
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
        }
        .avatar {
          width: 178px;
          height: 178px;
          display: block;
      }
    }
  }
</style>
